<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { eventCenter, getCurrentInstance } from '@tarojs/taro';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
import { isJsonString } from '/@/utils/string-util';
import { watch } from 'vue';
const props = defineProps<{
  item: FlowPathTemplateApi.AttributeExtendDto;
}>();

const emits = defineEmits<{
  (e: 'onChange', value: string): void;
}>();
watch(
  () => props.item.attributeValue,
  () => {
    const selectedItem = state.options.find((item) => item.value === props.item.attributeValue);
    if (selectedItem) {
      state.radioVal = selectedItem.name;
    }
  },
);
//局部
const state: {
  radioPickerVisible: boolean;
  options: { name: string; value: string }[];
  radioVal: string;
} = reactive({
  radioPickerVisible: false,
  options: [],
  radioVal: '',
});

//单选项不为空才解析
if (
  props.item.attributeOption &&
  props.item.attributeOption.length > 0 &&
  isJsonString(props.item.attributeOption)
) {
  const objArr: { name: string; value: string }[] = JSON.parse(props.item.attributeOption);
  state.options.push(...objArr);
}
//页面-只读-显示-结果
if (props.item.readonlyAble === 1 && props.item.attributeValue) {
  const selectedItem = state.options.find((item) => item.value === props.item.attributeValue);
  if (selectedItem) {
    state.radioVal = selectedItem.name;
  }
}
//页面-可编辑-默认选项-显示-结果
if (props.item.editAble === 1 && props.item.attributeValue && props.item.attributeDefault) {
  const selectedItem = state.options.find((item) => item.value === props.item.attributeValue);
  if (selectedItem) {
    state.radioVal = selectedItem.name;
  }
}

/**
 * 单选项确认
 */
function confirm({ selectedOptions }) {
  state.radioVal = selectedOptions[0].text;
  console.log('radio picker==>', selectedOptions[0].value);
  emits('onChange', selectedOptions[0].value);
  state.radioPickerVisible = false;
}

function cancel() {
  state.radioPickerVisible = false;
}
onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    //清理数据，当成功页面返回的时候，显示初始状态
    state.radioVal = '';
    //页面-只读-显示-结果
    if (props.item.readonlyAble === 1 && props.item.attributeValue) {
      const selectedItem = state.options.find((item) => item.value === props.item.attributeValue);
      if (selectedItem) {
        state.radioVal = selectedItem.name;
      }
    }
    //页面-可编辑-默认选项-显示-结果
    if (props.item.editAble === 1 && props.item.attributeValue && props.item.attributeDefault) {
      const selectedItem = state.options.find((item) => item.value === props.item.attributeValue);
      if (selectedItem) {
        state.radioVal = selectedItem.name;
      }
    }
  });
});
</script>
<template>
  <template v-if="item.readonlyAble === 1">
    <nut-cell :title="item.attributeName" :desc="state.radioVal" />
  </template>
  <!--编辑 -->
  <template v-else>
    <nut-form-item
      :label="item.attributeName"
      :required="item.attributeRequired === 1"
      :label-width="120"
    >
      <view
        class="approve-edit-radio-picker"
        @click="state.radioPickerVisible = !state.radioPickerVisible"
      >
        <text>{{ state.radioVal || (item.tips ? item.tips : '请选择') }}</text>
        <app-nut-icon-right />
      </view>
      <nut-popup round position="bottom" v-model:visible="state.radioPickerVisible">
        <nut-picker
          :columns="
            state.options.map((item) => {
              return {
                text: item.name,
                value: item.value,
              };
            })
          "
          title="单选项选择"
          @cancel="cancel"
          @confirm="confirm"
        ></nut-picker>
      </nut-popup>
    </nut-form-item>
  </template>
</template>
<style lang="scss">
.approve-edit-radio-picker {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
